<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>render循环判断</title>
</head>
<body>
<div id="app">
    <com :items="list"></com>
</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                list: [1, 2, 3, 4, 5, 6, 7, 8, 9]
            }
        },
        components: {
            com: {
                props: {
                    items: {
                        type: Array,
                    }
                },
                render: function (createElement, context) {
                    if (this.items.length) {
                        //当list的length大于0的时候就走这里
                        return createElement(
                            'ul',
                            //遍历list的每一项
                            this.items.map((item) => {
                                return createElement('li', item);
                            })
                        )
                    } else {
                        //当list的length为0的时候走这里
                        return createElement('ul', '暂无数据');
                    }
                }
            },

        }
    })

</script>

</body>
</html>